<template>
    <Head />
    <div class="main">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh" :loosing-text="$t('loosingText')"
            :pulling-text="$t('pullingText')">
            <van-list v-model:loading="loading" :finished="finished" :finished-text="$t('finishedText')"
                :loading-text="$t('loadingText')" @load="onLoad">
                <div v-for="(item, index) in walletDetailsList" :key="index" class="wallet">
                    <div class="content">
                        <div class="title">
                            {{ cashList.find((item) => {
                                return item.type == type
                            }).name }}
                        </div>
                        <div class="money">
                            {{ item.money }}
                        </div>
                        <div class="time">
                            {{ FreeTime(item.createAt, "y-m-d h:i:s") }}
                        </div>
                    </div>
                </div>
            </van-list>
        </van-pull-refresh>
    </div>
</template>
<script setup lang="ts">
import { Async_cashList } from "@/server/api";
import { FreeTime } from "@/utils/tool";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const route = useRoute();
const walletDetailsList = ref([]);
const loading = ref(false);
const finished = ref(false);
const refreshing = ref(false);
const type = ref(route.query.type);

const cashList = ref([
    { name: t("incomeReward"), type: 'EARNINGS', },
    { name: t("incomeReward"), type: 'NEWUSER' },
    { name: t("incomeReward"), type: 'INVITE' },
    { name: t("incomeReward"), type: 'CONTRIB' },
    { name: t("nodeReward"), type: 'NODE' },
])

const pageParams = ref({
    page: 0,
    size: 20
});

const onLoad = () => {
    if (refreshing.value) {
        walletDetailsList.value = [];
        refreshing.value = false;
    }
    getList();
};

const getList = async () => {
    try {
        let { list }: any = await Async_cashList({
            type: type.value,
            page: pageParams.value.page,
            size: pageParams.value.size,
        });
        loading.value = false;
        if (!list) {
            // 如果返回数据为空，表示已加载完成
            finished.value = true;
        } else {
            walletDetailsList.value = walletDetailsList.value.concat(list);
            pageParams.value.page++;
        }
    } catch (error) {
        finished.value = true;
        console.error(error);
    } finally {
        loading.value = false;
    }
};

const onRefresh = () => {
    pageParams.value.page = 0;
    walletDetailsList.value = [];
    refreshing.value = false;
    finished.value = false;
    loading.value = true;
    getList();
};
</script>
<style scoped lang="scss">
.main {
    width: 100%;
    padding: 12px;
    padding-top: calc(56px + 12px);
    height: calc(100% - 50px);
    min-height: calc(100vh);
    background: #1a1d1a;
}

.wallet {
    display: flex;
    justify-content: flex-start;
    margin-bottom: 6px;

    .content {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: space-between;
        background: #070707;
        padding: 12px;
        border-radius: 6px;
        font-size: 16px;
        color: #ccc;
        width: 100%;
        display: flex;
        font-size: 14px;

        .title {
            color: #fff;
            font-size: 16px;
        }

        .money {
            font-weight: bold;
            color: #f6d664;
            font-family: 'DINPro-Black"';
        }
    }
}

.nodata {
    display: flex;
    justify-content: center;
    color: #666;
    font-size: 15px;
    align-items: center;
    margin-top: 40px;
}
</style>
  